<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";

const biliStore = useBiliStore();
const emit = defineEmits<{
  (e: "update:show", val: boolean): void;
}>();
const setting = biliStore.thanksPlugin.config;
function onModalEnter() {}
function onModalLeave() {}
</script>

<template>
  <n-modal
    preset="card"
    class="w-150 min-w-100 min-h-80"
    title="答谢姬"
    :on-after-enter="onModalEnter"
    :on-after-leave="onModalLeave"
    @update:show="$emit('update:show', $event)"
  >
    <div class="text-xs text-red">
      <span>占位符: </span>
      <span
        >%name%(用户昵称),%gift-name%(礼物名称),%gift-num%(礼物数量),%guard-name%(舰长|提督|舰长)</span
      >
    </div>
    <n-tabs type="line" animated>
      <n-tab-pane name="giftTab" tab="礼物">
        <n-form label-placement="left" label-width="80">
          <n-form-item label="规则">
            <n-input
              v-model:value.trim="setting.giftRule"
              type="text"
              show-count
              placeholder="礼物回复文本"
            />
          </n-form-item>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="guardTab" tab="大航海">
        <n-form label-placement="left" label-width="80">
          <n-form-item label="规则">
            <n-input
              v-model:value.trim="setting.guardRule"
              type="text"
              show-count
              placeholder="大航海回复文本"
            />
          </n-form-item>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="welcomeTab" tab="欢迎">
        <n-form label-placement="left" label-width="80">
          <n-form-item label="普通用户">
            <n-input
              v-model:value.trim="setting.welcomeRule.ordinary"
              type="text"
              show-count
              placeholder="普通用户欢迎文本"
            />
          </n-form-item>
          <n-form-item label="粉丝">
            <n-input
              v-model:value.trim="setting.welcomeRule.fans"
              type="text"
              show-count
              placeholder="粉丝欢迎文本"
            />
          </n-form-item>
          <n-form-item label="大航海">
            <n-input
              v-model:value.trim="setting.welcomeRule.guard"
              type="text"
              show-count
              placeholder="大航海欢迎文本"
            />
          </n-form-item>
        </n-form>
      </n-tab-pane>
    </n-tabs>
  </n-modal>
</template>

<style scoped lang="scss"></style>
